<!DOCTYPE html>
<html lang="en">

<%- include('head.html'); %>
<script src="/lib/webfont.js"></script>
<script src="/lib/underscore-min.js"></script>
<script src="/lib/snap.svg-min.js"></script>
<script src="/lib/sequence-diagram-min.js"></script>
<script src="/lib/dayjs.min.js"></script>

<style>
    .raw-sip{
        background-color: #eee;
        position: fixed;
        top: 40px;
        bottom: 0px;
        right: 0px;
        overflow: scroll;
    }
    .raw-seq{
        position: fixed;
        top: 40px;
        bottom: 0px;
        left: 0px;
        overflow: scroll;
    }
    .sequence {
        font-size: 12px;
    }
    .signal text {
        fill: #000000;
    }
    .signal text:hover {
        fill: red;
        cursor: pointer;
    }
    .note rect, .note path {
        fill: #ffff00;
    }
    .title rect, .title path,
    .actor rect, .actor path {
        fill: #ffffff
    }

</style>

<body>
    <div class="container-fluid" id="app" data-callid="<%= callid %>">
        <div class="row">
            <div class="col-md-4 pull-right">
                <button @click="downloadRawSIP" class="btn btn-default">Download</button>
                <a class="btn btn-primary" v-show="aLegId" role="button" :href="aLegId" target="_blank">Find ALeg</a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-8 raw-seq">
                <div class="diagram" id="seq">
                </div>
            </div>
            <div class="col-md-4 raw-sip">
                <div v-for="(item,index) in seq" :key="item.id">
                    <h5 :id="'raw-#' + index">#{{index}} [{{item.method}}] {{item.time}}【{{item.src_host}}->{{item.dst_host}}】 </h5>
                    <pre>{{item.raw}}</pre>
                </div>
            </div>
        </div>
        
    </div>
</body>

<script src="/js/call.js"></script>
</html>

